<!--
 * @Description  : 修改公告
 * @Author       : zhao
 * @Date         : 2022-07-26 17:17:19
 * @LastEditors  : zhao
 * @LastEditTime : 2023-02-02 10:39:33
-->

<template>
    <div class='add height_Fill'>
        <ztitle :name="'修改公告'" :back="true" />
        <el-form :inline="true" :model="formInline.value" :rules="state.rules" ref="ruleFormRef" class="demo-form-inline"
            :label-width="'100px'">
            <el-form-item label="标题：" style="width:100%" prop="title">
                <el-input v-model="formInline.value.title" placeholder="请输入标题" size="default" clearable />
            </el-form-item>


            <el-form-item label="公告内容：" style="width:100%">
                <Editor :is-disable="false" ref="editorVal" style="width:100%" v-model="formInline.value.content"/>
            </el-form-item>
            <el-form-item class="footer">
                <el-button type="primary" @click="onSubmit(ruleFormRef)" size="default">修改</el-button>
                <el-button type="primary" @click="jump" size="default">返回</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>

<script setup lang='ts'>
import Editor from '/@/components/editor/ExtendedEditor.vue';
import ztitle from '/@/components/ztitle/index.vue';
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { usePublicity } from '/@/stores/publicity'
import { toRaw } from '@vue/reactivity'
import { useTableInfo } from '/@/stores/ztable'
import type { FormInstance, FormRules } from 'element-plus'

const usePublicitys = usePublicity()
const pub = usePublicity()
const router = useRouter()
const editorVal = ref()

let formInline = <any>reactive({value:{}})
const useTableInfos = useTableInfo()
const state = reactive({
    rules: {
        title: [
            { required: true, message: '请输入公告标题', trigger: 'blur' },

        ],
    }
})
const ruleFormRef = ref<FormInstance>()
const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            
            let data = { ...formInline.value,content: editorVal.value.valueHtml }
            const { code } = await pub.updateNotice(data)
            if (code == 200) jump()
        } else {
            console.log('error submit!', fields)
        }
    })

}

const jump = () => {
    let paths = router.currentRoute.value.fullPath.split('/')
    router.push({ path: '/' + paths[1] })
}

const initdata =async () => {
    let arr = toRaw(useTableInfos.zTable.selectRows)
   const { data } = await usePublicitys.GetNotice({ id: arr[0].id })
    try {
        

    formInline.value = data

}catch{}
}
initdata()
</script>
<style lang='scss' scoped>
.add {
    padding: 20px;
    background: white;

    .el-form {
        padding: 20px;

        .footer {

            width: 100%;


        }
    }
}

::v-deep(.el-form-item__content) {
    justify-content: center;
}
</style>